<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="菜单名称">
      <el-input v-model="formInline.name" placeholder="菜单名称"></el-input>
    </el-form-item>
    <el-form-item label="父级菜单">
      <el-input v-model="formInline.Fname" placeholder="父级菜单名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="菜单编号" />
    <el-table-column prop="name" label="菜单名称" />
    <el-table-column prop="path" label="菜单路径" />
    <el-table-column prop="icon" label="菜单图标"/>
    <el-table-column prop="index" label="菜单级数"/>
    <el-table-column prop="parent.name" label="父级菜单" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,20,50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <el-form-item>
    <el-button type="primary" @click="onDelete">批量删除</el-button>
  </el-form-item>
  <el-dialog v-model="dialogFormVisible" title="添加和编辑菜单">
    <el-form :model="form">
      <input type="hidden" v-model="form.id">
      <el-form-item label="菜单名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" :label-width="formLabelWidth">
        <el-input v-model="form.icon" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="数字" :label-width="formLabelWidth">
        <el-input v-model="form.index" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="父级菜单" :label-width="formLabelWidth">
        <el-select v-model="form.parent" placeholder="部门名称"  label-width="20px">
          <el-option
              v-for="item in parentName"
              :key="item"
              :label="item"
              :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogSave"
        >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {onMounted,ref,reactive} from "vue";
import {loadAll, update, deleted, add,deleteAll} from "@/api/menu";
import { ElMessageBox, ElMessage} from 'element-plus'
import { selAllMenu } from "@/api/menu";

export default {
  // components: {Index},
  setup() {
    const list = ref([])
    const handleSelectionChange = (val) => {
      for (let i = 0; i < val.length; i++) {
        list.value[i] = val[i].id
      }
    }
    const onDelete = () => {
      console.log(list.value)
      deleteAll(list.value).then(res=>{
        if(res.success){
          loadAll({
            "currentPage":currentPage4.value,
            "pageSize":pageSize4.value,
          }).then(
              res=>{
                tableData.value = res.data.list
                total.value = res.data.total
              }
          )
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }else {
          ElMessage({
            type: 'error',
            message: '删除失败',
          })
        }
      })
    }
    const parentName = ref([])
    const parentId = reactive({id:''})
    const options1 = ref([])
    const onAdd = () => {
      selAllMenu().then(res=>{
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          parentName.value[i] = options1.value[i].name
        }
        Array.from(new Set(parentName.value))
        parentName.value = Array.from(new Set(parentName.value))
      })
      form.id = null
      form.name = null
      form.url = null
      form.icon = null
      form.index = null
      form.parent = null
      dialogFormVisible.value = true
    }
    const formInline = reactive({
      Fname: '',
      name: '',
    })
    const onSubmit = () => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":pageSize4.value,
        'name':formInline.name,
        'parentName':formInline.Fname,
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const dialogSave = () => {
      dialogFormVisible.value = false
      for (let i = 0; i < options1.value.length; i++) {
        if(options1.value[i].name === form.parent){
          parentId.id = options1.value[i].id
        }
      }
      if(form.id!=null){
        update({
          'id':form.id,
          'name':form.name,
          'url':form.url,
          'icon':form.icon,
          'index':form.index,
          'parent':parentId
        }).then(res=>{
          if(res.success){
            for (let i = 0; i < tableData.value.length; i++) {
              if(tableData.value[i].id === form.id){
                tableData.value[i].name = form.name
                tableData.value[i].tel = form.url
                tableData.value[i].icon = form.icon
                tableData.value[i].index = form.index
                tableData.value[i].parent.name = form.parent
              }
            }
            parentId.id = null
            ElMessage({
              type: 'success',
              message: '修改成功',
            })
          }else{
            ElMessage({
              type: 'error',
              message: '修改失败',
            })
          }
        })
      }else {
        add({
          'name':form.name,
          'url':form.url,
          'icon':form.icon,
          'index':form.index,
          'parent':parentId
        }).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
              'name':formInline.name,
              'parentName':formInline.Fname,
            }).then(res=>{
              tableData.value = res.data.list
              total.value = res.data.total
              parentId.id = null
            })
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '添加失败',
            })
          }
        })
      }

    }
    const total = ref(5)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const form = reactive({
      id:'',
      name:'',
      url:'',
      icon:'',
      index:'',
      parent:'',
    })
    const tableData = ref('')
    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleEdit = (index, row) => {
      selAllMenu().then(res=>{
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          parentName.value[i] = options1.value[i].name
        }
        Array.from(new Set(parentName.value))
        parentName.value = Array.from(new Set(parentName.value))
      })
      form.id = row.id
      form.name = row.name
      form.url = row.url
      form.icon = row.icon
      form.index = row.index
      if(row.parent!=null){
        form.parent = row.parent.name
      }
      dialogFormVisible.value = true
    }
    const handleDelete = (index, row) => {
      open(index,row)
    }
    const handleSizeChange = (val) => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":val,
        'name':formInline.name,
        'parentName':formInline.Fname,
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const handleCurrentChange = (val) => {
      loadAll({
        "currentPage":val,
        "pageSize":pageSize4.value,
        'name':formInline.name,
        'parentName':formInline.Fname,
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const open = (index,row) => {
      ElMessageBox.confirm(
          '您确定要删除此条数据吗',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        deleted(row.id).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
            }).then(
                res=>{
                  tableData.value = res.data.list
                  total.value = res.data.total
                }
            )
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
    }
    onMounted(()=>{
      loadAll(
          {
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
          }
      ).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    })
    return{
      tableData,
      handleEdit,
      handleDelete,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleCurrentChange,
      handleSizeChange,
      form,
      dialogFormVisible,
      formLabelWidth,
      total,
      dialogSave,
      formInline,
      onSubmit,
      onAdd,
      parentName,
      parentId,
      options1,
      list,
      handleSelectionChange,
      onDelete
    }
  }
}
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block{
  margin-top: 10px;
  margin-bottom: 16px;
  width: 100%;
  text-align: center;
}
</style>
